<template>
	<view>
		<view class="list">
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>业主姓名：</text>
				<input type="text" placeholder="请输入姓名" v-model="params['联系人姓名']">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>联系电话：</text>
				<input type="number" placeholder="请输入电话号码" v-model="params['联系人电话']">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>报事地址：</text>
				<input type="text" placeholder="请输入地址" v-model="params['报事位置']">
			</view>
			<view class="list-item">
				<text style="color: red;">*</text>
				<text>所属小区：</text>
				<!-- <input type="text" placeholder="请输入装修地址"> -->
				<text>{{userInfo.projName}}</text>
				<!-- <view class="type" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker" v-model="value" mode="selector" :list="projectList" :dataset="{ name: 'label' }" @change="handleChange"
				 @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker> -->
			</view>
			<view style="border-bottom: 2rpx solid #f5f5f5;padding-bottom: 16rpx;">
				<textarea class="text" fixed value="" placeholder="请输入报事描述..." v-model="params['报事描述']" />
				<uploader ref="uploader" @input='onchange' />
			</view>
			<!-- <textarea fixed class="text" value="" placeholder="请描述您遇到的问题...如2幢1单元门禁机无法识别" v-model="params['报事描述']" />
			<uploader ref="uploader" @input='onchange' /> -->
			<button class="btn" @click="handleSubmit">提交</button>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	// import { previewImg } from '@/utils/previewImg'
	import uploader from '@/myComponents/image-uploader.vue'
	export default {
		components: {
			LbPicker,
			uploader
		},
		props: {
			projectList: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				chooseImg: [],
				value: '',
				label: '',
				params: {
					机构id: this.$config.groupId,
					来源:6,
					操作类型: 'submit',
					工单类型: '',
					联系人姓名: '',
					联系人电话: '',
					报事位置: '',
					所属项目id: null,
					报事描述: '',
					报事附件: []
				},
				file: {
					fileData: null,
					fileName: null
				},
				userInfo: {}
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.params.联系人姓名 = this.userInfo.name
			this.params.所属项目id = this.userInfo.projId
			this.params.联系人电话 = this.userInfo.mobile
		},
		methods: {
			onchange(e) {
				this.params.报事附件 = e
				// console.log(e)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					// this.params.所属项目id = e.item.id
					this.params.所属项目id = e.item.id
					// this.params2.所属项目id = e.item.id
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleSubmit() {
				if(this.params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写业主姓名',
						icon: 'none'
					})
				}else if(this.params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(/^1[3456789]\d{9}$/.test(this.params.联系人电话) === false){
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
				}else if(this.params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写报事地址',
						icon: 'none'
					})
				}else {
					this.$emit('submit',this.params)
				}
				
			}
		}
	}
</script>

<style lang="less">
	// .list {
	// 	height: 1100rpx;
	// 	.type {
	// 		width: 540rpx;
	// 		height: 60rpx;
	// 		line-height: 60rpx;
	// 		position: relative;
	// 		&:after {
	// 			content: '';
	// 			position: absolute;
	// 			transform: rotate(45deg);
	// 			border-top: 2rpx solid #666;
	// 			border-right: 2rpx solid #666;
	// 			top: 14rpx;
	// 			right: 16rpx;
	// 			width: 24rpx;
	// 			height: 24rpx;
	// 		}
	// 	}
	// 	.list-item {
	// 		padding-left: 18rpx;
	// 		width: 750rpx;
	// 		height: 88rpx;
	// 		display: flex;
	// 		color: #333;
	// 		border-bottom: 2rpx solid #f5f5f5;
	// 		align-items: center;
	// 		background-color: #fff;
	// 		input {
	// 			height: 60rpx;
	// 			// background-color: pink;
	// 			width: 500rpx;
	// 		}
	// 	}
	// 	.btn {
	// 		width: 568rpx;
	// 		height: 80rpx;
	// 		color: #fff;
	// 		font-size: 32rpx;
	// 		background: $theme-color;
	// 		border-radius: 8rpx;
	// 		margin-top: 62rpx;
	// 		margin-left: 92rpx;
	// 	}
	// 	.install {
	// 		margin-top: 0;
	// 	}
	// 	.text {
	// 		width: 750rpx;
	// 		height: 190rpx;
	// 		color: #999999;
	// 		padding-top: 20rpx;
	// 		padding-left: 20rpx;
	// 		background-color: #fff;
	// 	}
	// 	.list-bottom {
	// 		width: 750rpx;
	// 		height: 310rpx;
	// 		background-color: #fff;
	// 		padding-top: 40rpx;
	// 		display: flex;
	// 		.upload-img {
	// 			width: 230rpx;
	// 			height: 230rpx;
	// 			margin-left: 20rpx;
	// 			image {
	// 				width: 100%;
	// 				height: 100%;
	// 			}
	// 		}
	// 		.img-list {
	// 			position: relative;
	// 			image {
	// 				width: 230rpx;
	// 				height: 230rpx;
	// 				margin-left: 10rpx;
	// 			}
	// 			.clear {
	// 				width: 40rpx;
	// 				height: 40rpx;
	// 				background-color: #000;
	// 				opacity: 0.5;
	// 				color: #BFBFBF;
	// 				position: absolute;
	// 				top: 0;
	// 				right: 0;
	// 				font-size: 32rpx;
	// 				text-align: center;
	// 				line-height: 40rpx;
	// 			}
	// 		}
	// 	}
	// 	.container {
	// 		width: 100%;
	// 		height: 620rpx;
	// 	}
	// 	.renovation-notice {
	// 		margin-top: 33rpx;
	// 		margin-left: 179rpx;
	// 		font-size: 26rpx;
	// 		color: #999;
	// 		span {
	// 			color: #5BA1FF;
	// 		}
	// 	}
	// }
</style>
